@use "variables" as *;
@use "variables-root";

/**
 * 界面布局
 * ----------------------
 * 一个界面，可能是网格布局、垂直弹性布局、水平弹性布局、网格布局等；
 * 选择好布局之后，在划分出的每一个版块中，填写日常的业务代码；
 * 界面布局，使用 .page 样式，功能版块，使用 .box 样式。
 */
$sea-page-padding-horizontal: 0;
$sea-page-padding-vertical: 0;
$sea-page-huge-bottom: 360px !important; // 底部保留一定的边框，防止重要内容刚好落在屏幕底部，影响观看

$sea-page-min-height: 86vh;
$sea-page-gap-width: 0px;
$sea-page-gap-height: 0px;

$sea-page-padding: $sea-page-padding-vertical $sea-page-padding-horizontal;


// box - header
$sea-box-header-min-height: 32px;
$sea-box-header-padding: 8px 10px;
$sea-box-header-gap: 10px; // item-gap

// static - attribute
// border - box
$sea-box-border-width:  1px;
$sea-box-border-style: solid;
$sea-box-border-radius: 0;
$sea-box-header-radius: 0;
$sea-box-footer-radius: 0;

// padding - body/header/padding
$sea-box-padding: $sea-padding;

/**
 * 界面布局
 * ----------------------
 * 垂直布局，界面很长，需要底部留白，以提供更好的展示效果
 */
.sea-page {
    margin: 0 auto $sea-page-huge-bottom;

    min-height: $sea-page-min-height;
    padding: $sea-padding;

    background-color: $sea-bg-color;
}

/**
 * 主界面垂直布局
 * ---------------------------------------------------
 * 将界面水平拆分，需要做段落分割的情况使用
 */
.sea-page-column {
    display: flex;
    flex-flow: column;
    row-gap: $sea-page-gap-width;
    column-gap: $sea-page-gap-height;

    margin: 0 auto;
    min-height: $sea-page-min-height;

    padding: $sea-page-padding-vertical $sea-page-padding-horizontal $sea-page-huge-bottom;
}

/**
 * 主界面左右布局
 * ---------------------------------------------------
 * 将界面垂直拆分
 */
.sea-page-row {
    display: flex;
    flex-flow: row;
    row-gap: $sea-page-gap-width;
    column-gap: $sea-page-gap-height;
    margin: 0 auto;
    height: 100%;
    //min-height: 86vh;

    > .page-left {
        flex-shrink: 0;
    }

    > .page-body {
        flex: 1;
    }

    > .page-right {
        flex-shrink: 0;
    }
}

/**
 * Component: header
 * --------------
 * 可以作为大多数组件的标题栏
 * 与此类似的布局 .flex-spaced-wrap
 */
.box-header {
    cursor: default;

    display: flex;
    align-items: center;
    gap: $sea-box-header-gap;

    padding: $sea-box-header-padding;
    min-height: $sea-box-header-min-height;

    > h1, h2, h3, h4, h5, h6 {
        margin-top: 0;
        margin-bottom: 0;
    }

    > .pull-right {
        margin-left: auto;
    }
}

/**
 * Component: flex-box
 * -----------------------------------------------------------
 * 盒模型 - 基础盒模型
 */
.box {
    border-width: 1px;
    border-style: solid;
    border-radius: $sea-box-border-radius;

    padding: $sea-box-padding;
    border-color: var(--sea-box-border-color, var(--sea-border-color));
    background-color: var(--sea-bg-color);
}

/**
 * Component: flex-box
 * -----------------------------------------------------------
 * 盒模型 - 垂直弹性布局，与 el-card 功能一致；
 * 分成 header/body/footer 三个部分；
 * 整体高度固定的时候，body 部分自动撑满剩余空间；
 * flex-box 与 page-panel 级别一致，算是特殊的操作面板
 */
.flex-box {
    display: flex;
    flex-direction: column;

    border-width: 1px;
    border-style: solid;
    border-radius: $sea-box-border-radius;
    border-color: var(--sea-box-border-color, var(--sea-border-color));

    &:hover {
        border-color: var(--sea-box-hover-border-color, var(--sea-border-color-dark));

        > .flex-header {
            color: var(--sea-box-hover-text-color, var(--sea-text-color-regular));
            border-color: var(--sea-box-hover-border-color, var(--sea-border-color-dark));
            background-color: var(--sea-box-hover-bg-color, var(--sea-fill-color-light));
        }
    }

    > .flex-header {
        @extend .box-header;
        flex-shrink: 0;

        border-bottom: $sea-border;

        color: var(--sea-box-text-color, var(--sea-text-color-regular));
        background-color: var(--sea-box-bg-color, var(--sea-bg-color));
        border-bottom-color: var(--sea-box-border-color, var(--sea-border-color));
    }

    > .flex-footer {
        flex-shrink: 0;
        padding: $sea-box-padding;
        border-top: $sea-border;
        background-color: var(--sea-bg-color);
    }

    > .flex-body {
        flex: 1; /* 占据剩余空间 */
        overflow: auto; /* 可选：内容溢出时滚动 */
        padding: $sea-box-padding;
        background-color: var(--sea-bg-color);
    }

    & > :first-child {
        border-radius: $sea-box-header-radius;
    }

    & > :last-child {
        border-radius: $sea-box-footer-radius;
    }

    // 鼠标悬停样式
    &:hover {
        box-shadow: 0 2px 12px 0 var(--sea-box-bg-color, var(--sea-fill-color));
    }
}

